<template>
    <!-- 滑块弹窗 -->
    <f7-popup class="notify-popup-swipe" @popup:closed="fClose" :opened="opendStatus">
        <f7-page ptr @ptr:refresh="refresh" infinite :infinite-distance="100" :infinite-preloader="showPreloader"
            @infinite="infinite">
            <f7-navbar>
                <f7-nav-left>
                    <f7-link popup-close> <i class="nav-icon__back f7-icons">chevron_left</i> </f7-link>
                </f7-nav-left>
                <f7-nav-title>传阅</f7-nav-title>
            </f7-navbar>

            <f7-subnavbar>
                <qm-search placeholder="请输入姓名" v-model="searchKey" @search="searchQuery" shape="round" left-icon=""
                    clear-trigger="always" show-action>
                    <template #action>
                        <div @click="searchQuery(searchKey)"
                            style="width: 3em; text-align: center; font-size: var(--font-size-maincontent);color: var(--color-text-main)">
                            搜索</div>
                    </template>
                </qm-search>
            </f7-subnavbar>

            <f7-list class="exc-list button-list">
                <li v-for="item in list" :key="item.userId" @click="select(item)"
                    :class="{ active: usersId.indexOf(item.userId) !== -1 }">
                    <a class="item-link item-content">
                        <div class="item-inner">
                            <i class="active-icon f7-icons">checkmark_alt</i>
                            <div class="notify-user">
                                <div class="notify-user-name">
                                    <span class="label">姓名：</span>
                                    <span>{{ item.userName }}</span>
                                </div>
                                <div class="notify-user-loginId">
                                    <span class="label">账号：</span>
                                    <span>{{ item.loginId }}</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
            </f7-list>

            <f7-bottom-buttons slot="fixed" class="toolbar_fixed">
            <f7-row style="width: 100%; padding: 0 16px;">
                <f7-col>
                    <qm-button @click="close" style="margin: 0 auto" type="primary" size="small" title="取消">
                    </qm-button>
                </f7-col>
                <f7-col>
                    <qm-button @click="fnDoNotify" fill style="margin: 0 auto" type="primary" size="small" title="传阅">
                    </qm-button>
                </f7-col>
            </f7-row>
        </f7-bottom-buttons>
        </f7-page>
    </f7-popup>
</template>

<script>
import _ from 'lodash';

export default {
    props: {
        doNotify: String,
    },
    data() {
        return {
            searchKey: "",
            opendStatus: false,
            showPreloader: true,
            allowInfinite: true,
            page: 0,
            pageSize: 20,
            pageTotal: 1,
            list: [],
            users: [],
            usersId: [],
        }
    },
    created() {
        this.showPreloader = false;
        this.searchQuery();
    },
    methods: {
        fClose() {
            this.opendStatus = false;
        },
        close() {
          this.$f7.popup.close(".notify-popup-swipe");
        },
        open() {
          this.$f7.popup.open(".notify-popup-swipe");
        },
        fnDoNotify() {
            this.$f7.dialog.confirm("确定要传阅吗", confirm=> {
                if(this.doNotify) {
                    this.$f7.preloader.show();
                    this.$util.request(
                        this.doNotify,
                        {
                            users: this.usersId.join(",")
                        },
                        "post"
                    ).then(res=> {
                        this.$f7.preloader.hide();
                        if(res.data.success) {
                            this.$f7.popup.close(".notify-popup-swipe");
                            this.$f7.dialog.alert("传阅成功", ()=>{
                                // this.$f7.views.current.router.back();
                            })
                            return;
                        }
                        this.$f7.dialog.alert(res.data.meaasge);
                    }).catch(err=> {
                        this.$f7.preloader.hide();
                        this.$f7.dialog.alert("传阅失败");
                        throw err;
                    })
                }
            });
        },
        query() {
            return new Promise((resolve, reject) => {
                if (!this.allowInfinite) {
                    resolve();
                    return;
                };
                this.allowInfinite = false;
                let params = {
                    start: this.page * this.pageSize,
                    length: this.pageSize,
                    draw: 1,
                };
                if (this.searchKey) {
                    params.query = {
                        userName: this.searchKey
                    };
                }
                this.$util.request(
                    '/eipApi/commonselect/query?id=selectUsers',
                    params,
                    "post"
                ).then(res => {
                    if (this.page === 0) {
                        this.list = res.data.data
                    } else {
                        this.list = this.list.concat(res.data.data);
                    }
                    this.pageTotal = Math.ceil(res.data.recordsTotal / this.pageSize);
                    this.page++;
                    if (!this.page < this.pageTotal) {
                        this.showPreloader = false;
                    }
                    this.allowInfinite = true;
                    resolve();
                }).catch(err => {
                    reject(err);
                })
            })
        },
        select(user) {
            // if (this.users.indexOf(user) !== -1) {
            //     this.users.splice(this.users.indexOf(user), 1);
            // } else {
            //     this.users.push(user)
            // }
            if (this.usersId.indexOf(user.userId) == -1) {
                this.users.push(user)
                this.users = _.uniqWith(this.users, _.isEqual);
            } else {
                this.users.splice(this.usersId.indexOf(user.userId), 1);
            }
            this.usersId = this.users.map((v)=> {
                return v.userId;
            });
        },
        async searchQuery(key) {
            this.showPreloader = true;
            this.searchKey = key;
            this.page = 0;
            this.$f7.preloader.show();
            await this.query();
            this.$f7.preloader.hide();
        },
        async refresh(done) {
            this.showPreloader = true;
            this.page = 0;
            this.list = [];
            await this.query();
            done();
        },
        infinite() {
            if (this.page < this.pageTotal) {
                this.query(this.searchKey);
            } else {
                this.showPreloader = false;
            }
        }
    }
}
</script>

<style lang="less" scoped>
/* 底部按钮背景色 */
.toolbar {
    background-color: #fff;

}

/* 底部按钮容器上阴影 */
.toolbar-bottom::after {
    background-image: linear-gradient(to top, #fff, transparent);
}

.item-inner {
    position: relative;

    &::before {
        content: none !important;
    }

    .f7-icons.active-icon {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-brand);
        display: none;
    }
}


li.active {

    .f7-icons.active-icon {
        display: inline-block;
    }
}
</style>